<template>
  <div>
    <div class="container">
      <el-row>
        <el-col :span="10">
          <el-input
            size="small"
            placeholder="用户名/手机号"
            v-model="searchStr"
            class="input-with-select"
          >
            <el-button
              @click="search"
              slot="append"
              icon="el-icon-search"
            ></el-button>
          </el-input>
        </el-col>
      </el-row>
      <el-table
        :data="list"
        tooltip-effect="dark"
        style="width: 100%;margin-top:5px;"
        :height="tableHeight"
        border
        stripe
      >
        <el-table-column type="index" width="50"> </el-table-column>
        <el-table-column label="名称" prop="name" width="140">
          <template slot-scope="scope">
            {{ scope.row.user.nickname }}
          </template>
        </el-table-column>
        <!-- <el-table-column label="联系电话" prop="mobile"> </el-table-column> -->
        <el-table-column label="提交时间" width="180">
          <template slot-scope="scope">
            {{ scope.row.created_at.date.split(".")[0] }}
          </template>
        </el-table-column>
        <el-table-column prop="card_no" label="身份证号" min-width="150">
        </el-table-column>
        <el-table-column prop="id_card" label="银行卡号" min-width="150">
        </el-table-column>
        <el-table-column prop="bank" label="所属银行" width="150">
        </el-table-column>
        <el-table-column label="身份证正面" width="150">
          <template slot-scope="scope">
            <img
              @click="imgPreview(scope.row.front)"
              style="height:80px; width:120px; object-fit:cover;"
              :src="scope.row.front"
              alt=""
            />
          </template>
        </el-table-column>
        <el-table-column label="身份证反面" width="150">
          <template slot-scope="scope">
            <img
              @click="imgPreview(scope.row.verso)"
              style="height:80px; width:120px; object-fit:cover;"
              :src="scope.row.verso"
              alt=""
            />
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <div v-if="scope.row.is_identity === 0">
              <el-button
                @click="applyconfirm(scope.row.id, 1)"
                type="primary"
                size="small"
                >同意</el-button
              >
              <el-button
                @click="applyconfirm(scope.row.id, -1)"
                type="danger"
                size="small"
                >拒绝</el-button
              >
            </div>
            <div v-else-if="scope.row.is_identity === 1">已通过</div>
            <div v-else>已拒绝</div>
          </template>
        </el-table-column>
      </el-table>
      <div class="table-bottom-bar">
        <div></div>
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="page"
          :page-size="size"
          layout="total, prev, pager, next"
          :total="total"
          :background="true"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible" append-to-body>
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import { getApplyList, applyconfirm } from "@/api/draw-mng";
export default {
  name: "WithdrawApplyJMng",
  data() {
    return {
      list: [],
      searchStr: "",
      total: 0,
      size: 0,
      page: 1,
      tableHeight: 0,
      dialogVisible: false,
      dialogImageUrl: ""
    };
  },
  watch: {},
  methods: {
    applyconfirm(id, status) {
      applyconfirm({ id, identity: status }).then(res => {
        if (res.code === 200) {
          this.$message({
            message: status === 1 ? "同意成功" : "拒绝成功",
            type: "success"
          });
          this.getApplyList(this.page);
        }
      });
    },
    imgPreview(img) {
      this.dialogImageUrl = img;
      this.dialogVisible = true;
    },
    search() {
      this.getApplyList(1);
    },
    getApplyList(page) {
      getApplyList({
        page,
        center: this.searchStr ? this.searchStr : undefined
      }).then(res => {
        if (res.code === 200) {
          this.list = res.data.data;
          this.total = res.data.total;
          this.page = res.data.current_page;
          this.size = res.data.per_page;
        }
      });
    },
    handleCurrentChange(page) {
      this.getNormalGoodList(page);
    },
    changeSize() {
      this.tableHeight = document.body.clientHeight - 180;
      window.onresize = () => {
        this.changeSize();
      };
    }
  },
  created() {
    this.getApplyList(1);
    this.changeSize();
  },
  components: {}
};
</script>

<style></style>
